<template>
    <el-form :model="user" label-width="0" class="auth-form">
        <!-- 标题部分 -->
        <el-form-item class="form-header">
            <div class="title-container">
                <h1 class="gradient-title">密码修改</h1>
                <div class="decorative-line"></div>
            </div>
        </el-form-item>

        <!-- 旧密码 -->
        <el-form-item prop="oldPassword" class="animated-item">
            <el-input v-model="user.oldpassword" placeholder="请输入旧密码" :prefix-icon="Lock" clearable size="large"
                class="custom-input">
                <template #suffix>
                    <el-icon class="input-icon">
                        <User />
                    </el-icon>
                </template>
            </el-input>
        </el-form-item>

        <!-- 新密码 -->
        <el-form-item prop="newPassword" class="animated-item">
            <el-input type="password" v-model="user.newpassword" placeholder="请输入新密码（8-16位字符）" :prefix-icon="Lock"
                show-password size="large" class="custom-input">
                <template #suffix>
                    <el-icon class="input-icon">
                        <Key />
                    </el-icon>
                </template>
            </el-input>
        </el-form-item>

        <!-- 确认密码 -->
        <el-form-item prop="confirmPassword" class="animated-item">
            <el-input type="password" v-model="user.renewpassword" placeholder="请再次输入新密码" :prefix-icon="Lock"
                show-password size="large" class="custom-input">
                <template #suffix>
                    <el-icon class="input-icon">
                        <Check />
                    </el-icon>
                </template>
            </el-input>
        </el-form-item>

        <!-- 操作按钮 -->
        <el-form-item class="action-item">
            <el-button type="primary" size="large" class="submit-btn" @click="updatePassword">
                确认修改
                <el-icon class="btn-icon">
                    <Right />
                </el-icon>
            </el-button>
        </el-form-item>
    </el-form>
    <div ref="canvasContainer" class="canvas-container"></div>
</template>

<script setup lang="ts">
import useUserInfoStore from '@/stores/userInfo';
import { Lock } from '@element-plus/icons-vue'
import { ref, onMounted, onBeforeUnmount } from 'vue';
const userInfoStore=useUserInfoStore();
import * as THREE from 'three';
const user=ref({
    oldpassword:'',
    newpassword:'',
    renewpassword:''
})
import { userUpdatePasswordService } from '@/api/user'
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const router =useRouter();
//修改密码
const updatePassword= async()=>{
    let result = await userUpdatePasswordService(user.value)
    ElMessage.success('修改成功，将跳转登录页')
    resetForm();
    setTimeout(()=>{
        router.push('/login')
    },2000)
}
const resetForm=()=>{
    user.value={
        oldpassword:'',
        newpassword:'',
        renewpassword:''
    }
}

// 容器元素引用
const canvasContainer = ref<HTMLElement | null>(null);

// Three.js 核心对象
let scene: THREE.Scene;
let camera: THREE.PerspectiveCamera;
let renderer: THREE.WebGLRenderer;
let cube: THREE.Mesh;

// 初始化场景
function initScene() {
    // 1. 创建场景、相机、渲染器
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
    );
    renderer = new THREE.WebGLRenderer({ antialias: true });

    // 2. 设置渲染器尺寸并挂载到 DOM
    renderer.setSize(window.innerWidth, window.innerHeight);
    canvasContainer.value?.appendChild(renderer.domElement);

    // 3. 创建立方体
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 4. 设置相机位置
    camera.position.z = 5;
}

// 动画循环
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}

// 组件挂载时初始化
onMounted(() => {
    initScene();
    animate();
});

// 组件卸载时清理资源
onBeforeUnmount(() => {
    if (canvasContainer.value && renderer?.domElement) {
        canvasContainer.value.removeChild(renderer.domElement);
    }
    scene?.clear();
    renderer?.dispose();
});
</script>

<style scoped>
.canvas-container {
    width: 50%;
    height: 10%;
}
.auth-form {
    max-width: 480px;
    margin: 2rem auto;
    padding: 2rem 3rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.auth-form:hover {
    transform: translateY(-5px);
}

.form-header {
    margin-bottom: 2rem;
    text-align: center;
}

.title-container {
    position: relative;
    padding: 1rem 0;
}

.gradient-title {
    font-size: 2.2rem;
    background: linear-gradient(135deg, #434343 0%, #000000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

.decorative-line {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #409eff, transparent);
    margin: 0.8rem auto;
}

.custom-input {
    margin: 1rem 0;
}

.custom-input :deep(.el-input__inner) {
    height: 48px;
    border-radius: 8px;
    padding-left: 2.8rem;
    font-size: 1rem;
}

.input-icon {
    font-size: 1.2rem;
    color: #409eff;
    margin-right: 1rem;
}

.action-item {
    margin-top: 2rem;
}

.submit-btn {
    width: 100%;
    height: 48px;
    font-size: 1.1rem;
    letter-spacing: 2px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.btn-icon {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.submit-btn:hover .btn-icon {
    transform: translateX(3px);
}

/* 输入项动画 */
.animated-item {
    opacity: 0;
    animation: slideIn 0.6s forwards;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animated-item:nth-child(2) {
    animation-delay: 0.2s;
}

.animated-item:nth-child(3) {
    animation-delay: 0.4s;
}

.animated-item:nth-child(4) {
    animation-delay: 0.6s;
}
</style>
